<template>
  <div id="app">
    <h3>Ace编辑器导航</h3>
    <ace-editor2 v-model="sql" language="JavaScript" theme="github" :readOnly="false"/>
    <hr>
    <span>highlight 动态</span>
    <div v-highlight>
      <pre><code class="language-javascript">{{ code }}</code></pre>
    </div>
    <hr>
    <Highlight :code="sql"/>
    <hr>
    <AceEditor2/>
    <hr>
    <AceEditor3/>
  </div>
</template>

<script>
import AceEditor from "@/components/AceEditor";
import Highlight from "@/components/Highlight";
import AceEditor2 from "@/components/AceEditor2";
import AceEditor3 from "@/components/AceEditor3";

export default {
  name: 'App',
  components: {AceEditor3, AceEditor2, Highlight, AceEditor},
  data() {
    return {
      code: `function hello() {
  console.log('Hello, world!222!!!');
}`,
      sql: `select * from user where name='小皇冠' and age > 21`
    }
  }
}
</script>

<style lang="less" scoped>
pre {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 5px;
}
</style>
